"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = FlexExample;

var _react = _interopRequireDefault(require("react"));

var _design = require("@discuzq/design");

require("./index.scss");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Row = _design.Flex.Row,
    Col = _design.Flex.Col;

function FlexExample() {
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "page"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "flex-section"
  }, /*#__PURE__*/_react.default.createElement(_design.Divider, {
    orientation: "left"
  }, "Reverse \u5012\u5E8F\u6392\u5217"), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-container"
  }, /*#__PURE__*/_react.default.createElement(Row, {
    reverse: true
  }, /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "1")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "2")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "3")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "4")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "5")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "6"))))))), /*#__PURE__*/_react.default.createElement(_design.Divider, {
    orientation: "left"
  }, "Order \u6307\u5B9A\u5143\u7D20\u6392\u5217"), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "1")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "2")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "3")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "4")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "5")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2,
    order: -1
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "6"))))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 2,
    order: 1
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "1")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "2")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "3")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "4")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "5")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "6")))))))));
}